مترجم: حبیب الله علیخانی
منبع: راسخون




 
هنگامی که برنامه شما نصب می شود، یک ایکنی وجود دارد تا به کاربران کمک کند تا برای اجرای برنامه از آن استفاده کنند. نکته ی مهم این است که باید برای همه ی صفحه نمایش ها با دانسیته یا تراکم پیکسلی متفاوت یک آیکن مرتبط طراحی کنیم. زمانی که شما اپلیکیشن را ایجاد کردید، ADT به طور اتوماتیک یک آیکن اجرایی پیشفرض را برای آن در نظر می گیرد(البته در ورژن های بالاتر هنگام ایجاد یک پروژه یک ویزارد برای انتخاب آیکن وجود دارد) مانند تصویر زیر:
شما می توانید این آیکن را برای خودتان تغییر دهید. من آیکن دایره ای شکل زیر را با استفاده از یک برنامه ی ویرایش تصویر ایجاد کرده ام. شما می توانید هم خودتان ایجاد کنید و یا از اینترنت دانلود کنید:

• آیکن می تواند منحصر بفرد باشد و در مورد یک برند خاص باشد.
• از بکاربردن نام اپلیکیشن در داخل طراحی خود جلوگیری کنیم، چون نام اپلیکیشن به طور خودکار زیر آن قرار خواهد گرفت.
• تصویر بکار گرفته شده در آیکن نمی بایست تصویرCropped شده یا بریده شده از یک تصویر بزرگ تر باشد.
• فرمت آیکن اپلیکیشن های اندرویدی باید PNG 32بیتی باشد.
• همانطور که قبلاً توضیح داده شد چهار نوع صفحه نمایش از دید میزان دانسیته آنها وجود دارد و این در حالی است که هر اپلیکیشن اندرویدی باید دارای چهار نسخه در ابعاد مختلف برای هر یک از صفحه نمایش ها باشد تا چنانچه کاربرانی با دستگاه های مختلف از اپلیکیشن ما استفاده کردند تصویر با کیفیتی ببینند.
تطابق سایز آیکن با Density ی صفحه نمایش
از آنجا که سیستم عامل اندروید روی دستگاه های متفاوتی با صفحه نمایش هایی با Density متفاوت اجرا می گردد، این نکته ضروری به نظر می رسد که تصاویر و شکل های مورد استفاده در اپلیکیشن خود را برای صفحه نمایش هایی با میزان Density متفاوت بهینه سازیم.
به خاطر Density های مختلف صفحه نمایش نیاز به سایز مختلف آیکن داریم، چگونه بفهمیم که در زمان طراحی آن آیکن چه اندازه ای باشد؟ هر Density باید سایز آیکن مخصوص به خودش را برای نمایش(بدون کشیدگی یا فشردگی و ..) روی صفحه نمایش داشته باشد.
در رابطه با Density نیز چهار دسته کلی وجود دارد که عبارتند از
: Low(ldpi) به معنی "کم"،
Medium(mdpi) به معنی "متوسط"،
High(hdpi) به معنی "زیاد"
xtra high(xhdpi) به معنی "خیلی زیاد”
جدول زیر رابطه ی میزان دانسیته با ابعاد آیکن ها را نشان می دهد:
برای نمایش صفحه نمایشی با dpi پایین(ldpi) باید ابعاد آیکن 32*32 پیکسل باشد.
برای نمایش صفحه نمایشی با dpi متوسط(mdpi) باید ابعاد آیکن 48*48 پیکسل باشد.
برای نمایش صفحه نمایشی با dpi بالا(hdpi) باید ابعاد آیکن 72*72 پیکسل باشد.
برای نمایش صفحه نمایشی با dpi بسیار بالا(xhdpi) باید ابعاد آیکن 96*96 پیکسل باشد.
Padding: برای رعایت فاصله آیکن اپلیکیشن ما با دیگر آیکن ها می توانیم برای آیکن خود padding در نظر بگیریم. مثلا اگر بخواهیم آیکنی برای صفحه نمایشی با دانسیته ی متوسط طراحی کنیم، با استفاده از نرم افزاری انند فتوشاپ تصویری با پس زمینه شفاف(Transparent) با ابعاد 48*48 پیکسل ایجاد می کنیم . برای قرار دادن padding از هر طرف تصویر خود، مثلا 5 پیکسل را خالی می گذاریم. در این حالت تصویر ما ابعاد 48*48 است اما فضای مفید استفاده شده ی آن 40*40 است.

مستندات اندروید شامل یک مقاله ی کامل تحت عنوان “Icon DesignGuidelines, Android 2.0,” می باشد که همه ی جنبه های طراحی آیکن را پوشش می دهد. این مقاله حاوی این مطلب است که چگونه به طور دستی آیکن را برای پلتفرم اندروید ایجاد کنیم. این مقاله حاوی راهنمایی هایی است که چکاری را انجام دهید و چکاری انجام ندهید، ابزار و رنگ ها ، اندازه و راهنمایی های موقعیت یابی و از همه بهتر، قالب آیکنی که شما می توانید استفاده کنید، را شامل می شود. شما میتوانید همه ی این راهنمایی ها را در سایت زیر بیابید:
http://d.android.com/guide/practices/ui_guidelines/icon_design.html

به دلیل اینکه شما SDK اندروید را دانلود کرده اید، این قالب های ایکن و ابزار برا ی استفاده شما بر روی هارد درایو شما در دسترس است. به پوشه ی نصب SDK خود بروید و از آنجا به دایرکتوری docs/shareables بروید. در انجا فایل ها zip مختلفی می بینید که شامل قالبها و نمونه ها می باشد. قالب ها را در یک برنامه ی ویرایشگر تصویر دلخواه باز کنید وبرای ایجاد آیکن، در اسناد راهنمایی های طراحی را دنبال کنید.

شما نیاز دارید تا نسخه هایی از این آیکن با Density های مختلف را داشته باشید. برای این کار باید این آیکن های مربوطه را در پوشه های ldpi و hdpi و mdpi و xhdpi کپی کنید. اگر شما این کار را انجام ندهید، کاربرانی که دستگاه آنها دارای Density ی پایین داشته باشند، آیکن اجرایی پیشفرض را دریافت می کنند، مانند تصویر زیر که در بالاتر نشان داده شد:
اینکه چگونه یک آیکن اجرایی برای خودتان ایجاد کنید، در راهنمایی های طراحی اندروید واقع در آمده شده :
http://d.android.com/guide/practices/ui_guidelines/icon_design.html
اما با این حال، در زیر ما یک آیکن را در فتوشاپ آموزش می دهیم.
نحوه ی ایجاد کردن یک آیکن اجرایی(launcher Icon) در فتوشاپ
برای شروع این کار ابتدا از طریق زیر(یا از طریق Ctrl + N) یک فایل در فتوشاپ ایجاد می کنیم. البته این یک فایل تمرینی است و شما برای ایجاد آیکن برای پروژه تان، طبق نکات گفته شده در بالا، باید یک فایل زیبا بسازید.
File  New
سپس پنجره ای به شکل زیر باز می شود که ما مقادیر آن را به صورت زیر تغییر می دهیم :
• در بخش Name یک نام اختیاری وارد می کنیم که ما در اینجا نام آن را Ic-launcher وارد کرده ایم.
• در بخش Width و Heigh به ترتیب طول و عرض را وارد می کنیم که این مقدار را هر دو قسمت 96 وارد کرده ایم و واحد آنها باید پیکسل باشد.
• بخش Contents که یعنی محتویات، گزینه ی Transparent یعنی" شفاف " را انتخاب می کنیم چون می خواهیم نواحی حاوی Padding بدون رنگ و شفاف باشد.
در ابتدا ما آیکن را برای صفحه نمایش با تراکم بسیار بالا(xhdpi) ایجاد می کنیم و سپس سپس ابعاد آیکن خود را برای تراکم های دیگر کاهش می دهیم.
در نهایت دکمه ی ok را کلیک می کنیم. تصویر ایجاد شده به صورت زیر است:
ابعاد تصویر بالا 96 در 96 است و یک نصویر بدون رنگ است.
اکنون می خواهیم از طریق زیر برای آن padding ایجاد کنیم.
ابتدا به روش زیر یک مستطیل کوچک به اندازه ی padding ای که می خواهیم داشته باشیم ایجاد می کنیم:
مانند تصویر زیر، ابزار Rectangle tool (ابزار رسم مستطیل) را انتخاب می کنیم:
سپس ابزار آن در بالا(نوار ابزار) اضافه می شود، که ما مثلث کوچک را می زنیم و اپشن آن باز می شود و ما طول و عرض مربع را وارد می کنیم که در اینجا هردو px 5 (پیکسل) را وارد کرده ایم(در این آموزش می خواهیم padding به اندازه ی 5 پیکسل ایجاد شود) :
سپس داخل تصویر کلیک می کنیم تا مربع ایجاد شود این مربع می تواند جابجا شود. ما این مربع را در چهار طرف ضلع این مربع قرار می دهیم(در حقیقت هدف از ایجاد این مربع این است تا از طریق آن بتوانیم از چهار طرف تصویر خود 5 پیکسل فضای خالی ایجاد کنیم):
اگر ابزار Ruler دیده نشود، از مسیر زیر آنرا فعال می کنیم:
سپس به صورت زیر می شود:
موس را روی قسمت مشخص شده(فلش قرمز) در بالا قرار می دهیم و آنرا به سمت راست می کشیم می بینیم که یک خط عمودی ایجاد می شود و سپس موس را تا جایی به سمت راست می کشیم تا با ضلع سمت راست مربع مماس شود و در نهایت موس را رها می کنیم، مانند زیر:
سپس با استفاده از ابزار Move Tool مربع قرمز را جابجا می کنیم :
مربع را به اضلاع دیگر مماس می کنیم و کار بالا را تکرار می کنیم، و باید مربع را حذف کنیم.
در پنجره Layers به معنی "لایه ها" که با یک بیضی قرمز رنگ نشان داده شده است شکلی تحت عنوان Layer 1 ایجاد شده است که در کنار آن یک عکس چشم دیده می شود که در تصویر فوق با یک دایره قرمز رنگ نشان داده شده است. با کلیک کردن روی عکس چشم این امکان را خواهیم داشت تا شکلی را به صورت موقت از روی صفحه نمایش پنهان سازیم. حال روی عکس چشم کلیک کرده و مربع قرمز رنگ را از صفحه پنهان می سازیم:
در نهایت به شکل زیر می شود:
می توان این فایل را ذخیره کرده وتا اینجا یک Template با تعدادی Guide ایجاد کرده ایم. برای آیکن های اپلیکیشن های اندرویدی برای انواع صفحه نمایش با دانسیته های مختلف استفاده کنیم.
ایجاد آیکن برای انواع صفحه نمایش با دانسیته های مختلف:
طرحی ساده در template ایجاد شده در بخش بالا ایجاد می کنیم(دلخواه). فقط چیزی که باید در نظر بگیریم این است که لبه های شکل ما از Guide ها بیرون نزند. فرضا شکل ما به صورت زیر است:
فرمت آیکن های اندروید می بایست PNG سی و دو بیتی باشد، از این رو نیاز داریم تا این تصویر را با فرمت PNG ذخیره سازیم.
از منوی اصلی گزینه File سپس گزینه Save As را انتخاب می کنیم سپس پنجره ای به شکل زیر مشاهده خواهیم کرد:
فرض کنیم که پروژه ای داریم و از این آیکن برای آن استفاده کنیم.
در این پنجره در بخش File name نامIc-launcher که در ساخت فایل وارد نمودیم آمده است. در بخش Format همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است فرمت PNG را انتخاب می کنیم. همانطور که قبلا گفته شده قصد داریم تا این آیکن را جایگزین آیکنی کنیم که خود نرم افزار اکلیپس به صورت پیش فرض برای پروژه ما ساخته است، از این رو پیش از زدن دکمه Save می بایست مسیر ذخیره سازی را به مسیری که در ابتدای نصب اکلیپس برای workspace در نظر گرفتیم و بعد از آن فولدر پروژه مورد نظر و سپس فولدر res و در نهایت فولدر drawable-xhdpi تغییردهیم و در آخر دکمه Save را کلیک نماییم.
پس از کلیک کردن دکمه Save خواهیم دید که پنجره ای به صورت زیر نمایان می شود که در این صورت تنظیمات پیش فرض را مد نظر قرار داده و دکمه OK را کلیک می کنیم.
اکنون نیاز داریم تا آیکن هایی برای Density هایی معادل با hdpi و mdpi و ldpi به ترتیب با ابعاد 72 در 72 و 48 در 48 و 36 در 36 ایجاد کنیم. برای این منظور ابتدا از hdpi شروع کرده و عکس طراحی شده را به ابعاد 72 در 72 کاهش می دهیم. برای این منظور از طریق زیر، منوی Image size را باز می کنیم :
خواهیم دید که پنجره ای به شکل زیر باز خواهد شد:
میبینیم که در بخش Width و Height عدد 96 وارد شده است. در همین تصویر در صورتیکه گزینه Constrain Proportionsتیک دار باشد، ابعداد طول و عرض تصویر ما به صورت متناسب با یکدیگر بزرگ و کوچک خواهند شد اما از آنجا که تصویر ما یک مربع است، هر عددی که برای Width یا همان عرض تصویر در نظر بگریم برای Height یا همان طول تصویر نیز در نظر گرفته خواهد شد. اما مقابل Width عدد 72 را وارد کرده و خواهیم دید که عدد مقابل Height به صورت خودکار از عدد 96 به 72 تغییر پیدا می کندو سپس گزینه OK را کلیک می کنیم و خواهیم دید که تصویر ما به ابعاد 72 در 72 در خواهد آمد. مانند مراحل قبل این فایل را Save کرده اما این بار محل ذخیره سازی را داخل فولدر res درون فولدر drawable-hdpi در نظر می گیریم:
و به محض کلیک کردن گزینه Save با تصویر زیر مواجه خواهیم شد:
در واقع همانطور که در تصویر فوق مشاهده می شود داخل فولدر drawable-hdpi فایلی تحت عنوان ic_launcher.png وجود دارد که اکلیپس به طور خودکار درحین ساخت پروژه ایجاد کرده است و از آنجا که نام انتخابی ما برای آیکن جدید با نام آیکن پیش فرض یکی است، همانطور که در تصویر فوق نشان داده شده است این اخطار به ما داده می شود که "فایلی با همین نام دراین فولدر وجود دارد. آیا می خواهید آن را با فایل جدید جایگزین کنید؟" که ما گزینه OK را کلیک می کنیم.
به همین روش یکبار دیگر تصویر خود را به ابعاد 48 در 48 درآورده سپس آنرا در فولدر drawable-mdpi ذخیره می سازیم. در نهایت تصویر خود را به اندازه 36 در 36 در آورده و آن را جایگزین تصویری می کنیم که در فولدر drawable-ldpi قرار دارد. حال این سوال ممکن است پیش آید که تنها فولدری که به صورت پیش فرض در آن آیکان ایجاد نشده بود فولدر drawable-xhdpi است و این در حالی است که مابقی فولدرها دارای آیکنی مرتبط با Density آن فولدر بودند و می بایست آیکن جدید را جایگزین آیکن های قبلی کرد.
در پاسخ به این سوال بایستی گفت که اگر خاطرمان باشد در آموزش هشتم در حین ساخت اولین پروژه خود سه فولدر drawable-ldpi و drawable-mdpi و drawable-hdpi به صورت خودکار توسط اکلیپس برای ما ایجاد شدند و بالتبع داخل آنها هم آیکنی مرتبط با Density آنها ایجاد شد اما این در حالی است که فولدر drawable-xhdpi اصلا وجود خارجی نداشت و ما آن را قبلا به منظور پشتیبانی از دستگاه هایی با صفحه نمایشی با Density بسیار بالا ایجاد کردیم. از همین رو است که هیچ آیکنی در آن قرار نداشت.
اکنون نیاز داریم تا اپلیکیشن خود را تست کنیم اما با موضوعی در اینجا مواجه می شویم که غفلت از آن نتایج متفاوتی را برای ما در بر خواهد داشت. اگر در حین طراحی آیکن جدید محیط برنامه نویسی اکلیپس باز بوده باشد و ما آیکن جدید را در سه فولدر drawable-ldpi و drawable-mdpi و drawable-hdpi جایگزین کرده باشیم، حتما نیاز است که اکلیپس را از این موضوع مطلع سازیم اما در صورتیکه نرم افزار اکلیپس بسته بوده باشد و پس از اتمام کار آن را اجرا کنیم دیگر نیازی به این کار نخواهد بود.
چنانچه مورد اول درباره ما صدق کند، همچون تصویر زیر عمل خواهیم کرد:
به طور خلاصه، روی پروژه خود کلیک راست نموده سپس همانطور که در تصویر فوق ملاحظه می شود گزینه Refresh به معنی "تازه کردن" را کلیک می کنیم. حال در صورتیکه پروژه خود را روی Emulator اجرا کنیم و به صفحه اپلکیشین ها روی Emulator برویم تصویر زیر را مشاهده خواهیم کرد:
همانطور که در تصویر فوق با یک کادر قرمز رنگ نشان داده شده است، تصویر آیکن اولین پروژه ما از تصویر پیش فرض اندروید به تصویر آیکن جدید تغییر پیدا کرد که ما آنرا روی صفحه نمایش می آوریم. به صورت زیر:
پایان این بخش.

/ج